<template>
  <div class="page-todobox">
    <div>
      <div class="type-wrap">
        <div
          v-for="(item, index) in typeList"
          :key="index"
          :class="{ active: activeIndex === index }"
          class="item"
          @click="onSelect(index)"
        >
          <div class="_lt">
            <img
              :src="activeIndex === index ? item.activeSrc : item.src"
              alt=""
            />
          </div>
          <div class="_rt">
            <div class="name">{{ item.name }}</div>
            <div class="num">
              {{ item.num }}
              <span class="dw" v-if="index != 4">件</span>
              <span class="dw1" v-else>%</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 查询条件 -->
      <QueryCondition @queryParams="queryParams"></QueryCondition>
      <div class="list-content">
        <div class="public-title">
          <div class="title-fl">项目列表</div>
          <div class="_rt">
            <div class="batch-handle">
              <el-button size="small" type="primary" icon="iconfont icbanli1"
                >批量办理</el-button
              >
            </div>
          </div>
        </div>

        <el-table
          :data="tableData"
          :height="tableHeight"
          v-loading="loading"
          :header-cell-style="{ fontWeight: '500' }"
        >
          <el-table-column
            type="selection"
            width="45"
            align="center"
          ></el-table-column>
          <el-table-column
            type="index"
            :index="typeIndex"
            label="序号"
            align="center"
            width="70"
          ></el-table-column>
          <el-table-column
            prop="handle"
            label="操作"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                :content="'办理'"
                placement="top"
              >
                <i
                  class="iconfont icbanli1"
                  style="color: #0098ff"
                  @click="onHandle(scope.row)"
                ></i>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                :content="'查看'"
                placement="top"
              >
                <i
                  class="iconfont icbaopi1"
                  style="color: #0098ff"
                  @click="onView(scope.row)"
                ></i>
              </el-tooltip>

              <el-tooltip
                class="item"
                effect="dark"
                :content="'催办详情'"
                placement="top"
              >
                <i
                  class="iconfont iccuibanxiangqing1"
                  style="color: #0098ff"
                  @click="showUrgeDetail(scope.row)"
                ></i>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                :content="'回退详情'"
                placement="top"
              >
                <i
                  class="iconfont ichuituixiangqing1"
                  style="color: #0098ff"
                  @click="showBackDetail(scope.row)"
                ></i>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态"></el-table-column>
          <el-table-column
            prop="projectName"
            min-width="150"
            label="项目名称"
          ></el-table-column>
          <el-table-column prop="itemName" label="事项名称"></el-table-column>
          <el-table-column prop="processName" label="事项办理环节"></el-table-column>
          <el-table-column prop="applyCompany" label="申请单位"></el-table-column>
          <el-table-column prop="applyPerson" label="申请人"></el-table-column>
          <el-table-column prop="applyTime" label="申请时间">
            
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            v-if="total > 0"
            background
            :page-sizes="[20, 30, 50]"
            :page-size="parameter.limit"
            layout="total, sizes, prev, pager, next"
            prev-text="上一页"
            next-text="下一页"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>
    <ComonDialog
      :proInfo="proInfo"
      :dialogFormVisible="dialogFormVisible"
      title="办理"
      @close="dialogFormVisible = false"
    ></ComonDialog>
    <HandleDialog
      :proInfo="proInfo"
      :dialogFormVisible="dialogFormVisible"
      title="催办详情"
      @close="handleVisible = false"
    ></HandleDialog>
    <DetailDialog
      :detailVisible="detailVisible"
      :title="detailTitle"
      @close="detailVisible = false"
    ></DetailDialog>
  </div>
</template>
<script>
import ComonDialog from "../components/comonDialog";
import DetailDialog from "../components/detailDialog";
import HandleDialog from "../components/handleDialog";
import QueryCondition from "../components/queryCondition";
import { getDbxList } from "@/api/businessApproval";
const fixHeight = 480;
export default {
  name: "todoBox",
  components: {
    ComonDialog,
    DetailDialog,
    QueryCondition,
    HandleDialog,
  },
  data() {
    return {
      tableHeight: window.innerHeight - fixHeight, //表格高度
      parameter: {
        limit: 20,
        page: 1,
      },
      timer: false,
      activeIndex: 0,
      proInfo: {},
      search: "",
      typeList: [
        {
          name: "待办总量",
          num: 288,
          src: require("../../../assets/businessApproval/one.png"),
          activeSrc: require("../../../assets/businessApproval/icon-1.png"),
        },
        {
          name: "超期事项",
          num: 288,
          src: require("../../../assets/businessApproval/two.png"),
          activeSrc: require("../../../assets/businessApproval/icon-2.png"),
        },
        {
          name: "催办事项",
          num: 288,
          src: require("../../../assets/businessApproval/three.png"),
          activeSrc: require("../../../assets/businessApproval/icon-3.png"),
        },
        {
          name: "回退事项",
          num: 288,
          src: require("../../../assets/businessApproval/four.png"),
          activeSrc: require("../../../assets/businessApproval/icon-4.png"),
        },
        {
          name: "超期事项占比",
          num: "22",
          src: require("../../../assets/businessApproval/five.png"),
          activeSrc: require("../../../assets/businessApproval/icon-5.png"),
        },
      ],
      tableData: [],
      total: 0,
      dialogFormVisible: false,
      detailVisible: false,
      handleVisible: false,
      detailTitle: "催办详情",
      form: {
        name: "",
        type: [],
        resource: "",
        desc: "",
      },
      loading: false,
    };
  },
  watch: {
    tableHeight(val) {
      if (!this.timer) {
        this.tableHeight = val;
        this.timer = true;
        const that = this;
        setTimeout(function () {
          that.timer = false;
        }, 400);
      }
    },
  },
  //  async created() {
  //      const res =await getTotal()
  //      console.log(res.data.result)
  //      this.typeList[0].num=res.data.result.dbx
  //      this.typeList[1].num=res.data.result.overdue
  //      this.typeList[2].num=res.data.result.urging
  //      this.typeList[3].num=res.data.result.roback
  //      this.typeList[4].num=(res.data.result.overdue/res.data.result.dbx).toFixed(2)*100

  //   },
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        that.tableHeight = window.innerHeight - fixHeight;
      })();
    };
    this.queryList();
  },
  methods: {
    typeIndex(index) {
      //处理分页数据的 index
      return (this.parameter.page - 1) * this.parameter.limit + index + 1;
    },
    // 查询组件传出来的查询参数
    queryParams(val) {
      console.log(val);
      Object.assign(this.parameter, val);
      this.queryList();
    },
    queryList() {
      this.loading = true;
      getDbxList(this.parameter)
        .then((res) => {
          this.loading = false;
          this.tableData = res.data.result;
          console.log(this.tableData);
        })
        .catch(() => {
          this.loading = false;
        });
    },
    append(data) {
      console.log(data, "data");
    },
    onSelect(index) {
      this.activeIndex = index === 4 ? -1 : index;
    },
    onHandle(data) {
      this.dialogFormVisible = true;
      this.proInfo = data;
    },
    onView(data) {
      console.log(data);
      this.$router.push({
        path:'/businessApproval/todoBox/ck',
        // path: "/businessApproval/checkdbx",
        query:data
      });
    },
    showUrgeDetail() {
      this.detailVisible = true;
      this.detailTitle = "催办";
    },
    showBackDetail() {
      this.detailVisible = true;
      this.detailTitle = "回退";
    },
    getList() {},
    //分页
    handleCurrentChange(val) {
      this.parameter.page = val;
      this.queryList();
    },
    //分页
    handleSizeChange(val) {
      this.parameter.limit = val;
      this.queryList();
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.page-todobox {
  background: #f4f6f8;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  .type-wrap {
    display: flex;
    margin-bottom: 20px;
    .item {
      display: flex;
      justify-content: start;
      align-items: center;
      width: 20%;
      padding: 30px;
      margin-right: 2%;
      background: rgba(0, 152, 255, 0.08);
      cursor: pointer;
      position: relative;
      border-radius: 3px;
      z-index: 1;
      &:last-child {
        margin: 0;
        cursor: default;
      }
      &.active {
        background: linear-gradient(0deg, #049aff 0%, #81e3f8 100%);
        box-shadow: 0px 3px 5px 0px rgba(6, 15, 16, 0.1);
        ._rt {
          color: #fff;
        }
      }
      &.active::before {
        content: "";
        border: 0.333333rem solid;
        border-color: #0098ff transparent transparent transparent;
        position: absolute;
        left: calc(50% - 0.16667rem);
        bottom: -13px;
      }
      ._lt {
        margin-right: 20px;
      }
      ._rt {
        color: #4e5157;
        .name {
          font-size: 14px;
          margin-bottom: 10px;
        }
        .num {
          font-weight: bold;
        }
        .dw {
          font-size: 4px;
          margin-left: 4px;
        }
        .dw1 {
          font-size: 6px;
          font-weight: bold;
          margin-left: -2px;
        }
      }
    }
  }
  .list-content {
    margin-top: 16px;
    padding: 12px 0;
    background: #fff;
  }
  .list-content .public-title {
    display: flex !important;
    justify-content: space-between !important;
    .title-fl {
      line-height: 34px;
    }
    ._rt {
      display: flex;
      justify-content: start;
      .batch-handle {
        margin-right: 25px;
        /deep/ .icbanli1 {
          color: #fff !important;
        }
      }
    }
  }
  /deep/ .el-pagination__total {
    float: left;
    margin-left: 10px;
  }
  .iconfont {
    color: #3385ff;
  }
  .iconfontdbot {
    margin-left: 18px;
  }

  .page {
    text-align: right;
    margin-top: 10px;
    position: relative;
    .Tips {
      position: absolute;
      left: 100px;
      top: 8px;
      span {
        color: #7c8195;
        font-size: 12px;
        margin: 0px 10px;
      }
    }
  }
  .add-dialog {
    .handle-wrap {
      display: flex;
      ._lt {
        width: 45%;
        padding-right: 5%;
        border-right: 1px solid #e0e1e2;
        .filter-tree {
          margin-top: 10px;
        }
      }
      ._rt {
        padding-left: 8%;
        width: 42%;
        display: flex;
        align-items: center;
      }
    }
  }
}

/deep/ .add-dialog .el-dialog .el-dialog__header {
  background: #f4f6f8 !important;
}
/deep/ .add-dialog .el-dialog .flex .el-form-item__content {
  display: flex;
}
/deep/ .add-dialog .el-checkbox {
  display: block;
}
/deep/ .add-dialog .el-dialog__title {
  font-weight: bold;
}
/deep/ .add-dialog .el-form-item__label {
  color: #86878c;
}
/deep/ .add-dialog .el-tree-node {
  border: 1px solid transparent;
}
/deep/ .add-dialog .el-tree-node .el-tree-node__content {
  background: #fff !important;
}
/deep/
  .add-dialog
  .el-tree-node__children
  .el-tree-node.is-expanded.is-current.is-focusable {
  border: 1px solid #0098ff;
  border-radius: 2px;
  color: #0098ff;
  background: #fff !important;
}
/deep/
  .handle-wrap
  > ._lt
  > .el-tree
  > .el-tree-node
  > .el-tree-node__content
  > .el-tree-node__expand-icon {
  font-size: 18px;
  color: #4e5157;
}
/deep/
  .handle-wrap
  > ._lt
  > .el-tree
  > .el-tree-node
  > .el-tree-node__content
  > .custom-tree-node {
  color: #4e5157;
  font-weight: 600;
}
/deep/ .custom-tree-node {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .circle {
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 50%;
    background: #0098ff;
    color: #fff;
    font-size: 12px;
  }
}

.img1 {
  width: 20px;
  // height: 16px;
  margin-right: 8px;
}
.img2 {
  width: 20px;
  margin-right: 8px;
}
.img3 {
  width: 20px;
  margin-right: 8px;
}
.img4 {
  width: 20px;
  position: relative;
  top: -2px;
}
img {
  cursor: pointer;
}
</style>